<template>
  <div class="productdetail-cintainer">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item.img_url" alt="">
      </van-swipe-item>
    </van-swipe>
    <Tips></Tips>
    <!-- 商品信息 -->
    <div class="info">
      <div class="name">{{info.name}}</div>
      <div class="goods_brief">{{info.goods_brief}}</div>
      <div class="retail_price">{{info.retail_price |RMBformat}}</div>
    </div>
    <van-cell title="展示弹出层" is-link @click="skushow=!skushow"/>
    <!-- 商品参数信息 -->
    <div class="attribute">
      <h3>商品参数</h3>
      <ul>
        <li v-for="(item,index) in attribute" :key="index">
          <div class="l">{{item.name}}</div>
          <div class="r van-ellipsis">{{item.value}}</div>
        </li>
      </ul>
    </div>

    <!-- 大量图片html信息 -->
    <div class="goods_desc" v-html="goods_desc"></div>

    <!-- 常见问题类似品论 -->
    <div class="pinglun">
          <div class="oftencomment">
              <div>常见问题</div>
          </div>
          <ul>
            <li v-for="item in issue" :key="item.id">
              <h3><van-icon name="stop" size="10px"/>{{item.question}}</h3>
              <p class="answer">{{item.answer}}</p>
            </li>
          </ul>
          <div class="oftencomment">
              <div>大家都在看</div>
          </div>
    </div>
    <!-- 产品组件的复用 -->
    <Products :goodsList="goodsList"></Products>
    <!-- 加入购物车  在底部 -->
    <AppGoodsSections @toGoCart="toGoCart" :goodsCount="goodsCount"></AppGoodsSections>
    <!-- sku组件 -->
    <van-sku
      ref="sku"
      v-model="skushow"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
    />
  </div>
</template>

<script>
import { GetProductDetail, getRelatedProductsList, GoodsCount, AddProductToCart } from '@/request/api.js'
import Tips from '@/components/Tips.vue'
import Products from '@/components/Products.vue'
import AppGoodsSections from '@/components/AppGoodsSections.vue'
export default {
  data() {
    return {
      // sku组件
      skushow: false,
      sku: {
        tree: [
        ],
        // 商品总库存
        stock_num: 0,
        price: '1.00', // 默认价格（单位元）
        hide_stock: false // 是否隐藏剩余库,
      },
      // 缩略图
      goods: {
        // 默认商品 sku 缩略图
        picture: ''
      },
      // ---------------------------------
      // 轮播图数据
      gallery: [],
      // 商品信息
      info: {},
      // 商品参数信息
      attribute: [],
      // 大量图片html信息
      goods_desc: '',
      // 常见问题
      issue: [],
      // 相关数据
      goodsList: [],
      // 购物车产品数量小图标
      goodsCount: '',
      // 产品id，来自productList的第一个数组项中的id
      productList: ''

    }
  },
  methods: {
    // 到购物车组件
    toGoCart() {
      if (this.skushow) {
        this.$toast('加入购物车成功')
        // 获取sku组件中的添加数量
        // console.log(this.$refs.sku.getSkuData().selectedNum)
        AddProductToCart({
          number: this.$refs.sku.getSkuData().selectedNum,
          goodsId: this.$route.query.id,
          productId: this.productList
        }).then(res => {
          // console.log('加入购物车请求数据：')
          // console.log(res)
          // 跟新购物车小图标
          this.goodsCount = res.data.cartTotal.goodsCount
          setTimeout(() => {
            this.$router.push('/cart')
          }, 1000)
        })
      } else {
        this.skushow = true
      }
    }
  },
  created() {
    // 产品详细信息
    GetProductDetail({ id: this.$route.query.id }).then(res => {
      // console.log('详细信息')
      // console.log(res)
      // 获取轮播图数据
      const { gallery, info, attribute, issue, productList } = res.data
      this.gallery = gallery
      this.info = info
      this.attribute = attribute
      this.goods_desc = info.goods_desc
      this.issue = issue
      this.goods.picture = res.data.info.list_pic_url
      this.sku.stock_num = res.data.info.goods_number
      this.sku.price = res.data.info.retail_price
      this.productList = productList[0].id
    })
    // 相关数据信息
    getRelatedProductsList({ id: this.$route.query.id }).then(res => {
      // console.log(res.data)
      this.goodsList = res.data.goodsList
    })
    // 获取购物车产品数量请求
    GoodsCount().then(res => {
      // console.log(res)
      this.goodsCount = res.data.cartTotal.goodsCount
    })
  },
  components: { Tips, Products, AppGoodsSections }
}
</script>

<style lang="less" scoped>
  .my-swipe .van-swipe-item {
    height: 2.5rem;
    color: #fff;
    font-size: 20px;
    line-height: 100px;
    text-align: center;
    background-color: #39a9ed;

    img{
          width: 100%;
          display: block;
    }
  }
      .van-swipe__indicator{
      background-color: red;
    }
    // 商品信息
    .info{
      padding: .125rem 0;
      text-align: center;
      line-height: .25rem;
      background-color: #fff;
      border-bottom: 1px solid rgba(53, 52, 52,.5);
      .name{
        font-size: .2rem;
      }
      .goods_brief{
        padding: .1rem 0;
        font-size: .125rem;
      }
      .retail_price{
        color: brown;
      }
    }
    // 参数信息
    .attribute{
      margin-top: .175rem;
      padding: .175rem .168rem;
      background-color: #ffffff;
      h3{
        font-size: .175rem;
        padding: .075rem;
      }
      li{
        line-height: .375rem;
        height: .375rem;
        display: flex;
        background-color: #efefef;
        margin-bottom: .05rem;
        border-radius: .1rem;
        .l{
          flex: 3;
          font-size: .125rem;
          text-align: right;
          padding-right: .075rem;
        }
        .r{
          font-size: .15rem;
          flex: 7;
        }
      }
    }
   /deep/.goods_desc{
    img{
      display: block;
      width: 100%;
    }
    }
    // 常见问题
    .pinglun{
      background-color: #fff;
              .answer{
          font-size: .125rem;
          padding:.075rem 0 .1rem .125rem;
        }
    }
.oftencomment
    {
        width:100%;
        height:36px;
        line-height: 36px;
        text-align:center;
        // border:1px solid green;
        position:relative;

    }
    .oftencomment div:before,.oftencomment div:after
    {
        position:absolute;
        background:#ccc;
        content:"";
        height:1px;
        top:50%;
        width:100px;
    }
    .oftencomment div:before{left:10px;}
    .oftencomment div:after{right:10px;}
</style>
